// 获取DOM元素
const navLinks = document.querySelectorAll('.nav-link');
const contentSections = document.querySelectorAll('.content-section');
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const sidebar = document.getElementById('sidebar');
const closeBtn = document.getElementById('closeBtn');

// 内容切换功能
function switchContent(targetSection) {
    // 隐藏所有内容区域
    contentSections.forEach(section => {
        section.classList.remove('active');
    });
    
    // 移除所有导航链接的激活状态
    navLinks.forEach(link => {
        link.classList.remove('active');
    });
    
    // 显示目标内容区域
    const targetElement = document.getElementById(targetSection);
    if (targetElement) {
        targetElement.classList.add('active');
    }
    
    // 激活对应的导航链接
    const activeLink = document.querySelector(`[data-section="${targetSection}"]`);
    if (activeLink) {
        activeLink.classList.add('active');
    }
    
    // 在移动端切换后关闭菜单
    if (window.innerWidth <= 768) {
        sidebar.classList.remove('active');
    }
}

// 为导航链接添加点击事件
navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetSection = link.getAttribute('data-section');
        switchContent(targetSection);
        
        // 平滑滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});

// 移动端菜单控制
mobileMenuToggle.addEventListener('click', () => {
    sidebar.classList.add('active');
});

closeBtn.addEventListener('click', () => {
    sidebar.classList.remove('active');
});

// 点击侧边栏外部关闭菜单（移动端）
document.addEventListener('click', (e) => {
    if (window.innerWidth <= 768 && 
        !sidebar.contains(e.target) && 
        !mobileMenuToggle.contains(e.target)) {
        sidebar.classList.remove('active');
    }
});

// 处理浏览器前进后退
window.addEventListener('popstate', () => {
    const hash = window.location.hash.slice(1);
    if (hash) {
        switchContent(hash);
    }
});

// 页面加载时处理
document.addEventListener('DOMContentLoaded', () => {
    // 检查URL hash
    const hash = window.location.hash.slice(1);
    if (hash && document.getElementById(hash)) {
        switchContent(hash);
    } else {
        // 默认显示历史渊源
        switchContent('history');
    }
    
    // 添加键盘导航支持
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && window.innerWidth <= 768) {
            sidebar.classList.remove('active');
        }
    });
});

// 响应式处理
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        if (window.innerWidth > 768) {
            sidebar.classList.remove('active');
        }
    }, 250);
});

// 平滑滚动增强
function smoothScrollTo(element) {
    element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}

// 添加页面过渡动画
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// 为内容元素添加观察
document.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll('.feature-card, .work-item, .method-card, .impact-item, .step');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
});

// 添加加载动画
window.addEventListener('load', () => {
    document.body.classList.add('loaded');
});

// 打印欢迎信息
console.log('%c欢迎来到非物质文化遗产介绍页面！', 'color: #667eea; font-size: 20px; font-weight: bold;');
console.log('%c了解更多非遗文化，请浏览各个板块内容。', 'color: #555; font-size: 14px;');
